<!DOCTYPE html>
<html class="no-js css-menubar" lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
        <meta name="description" content="bootstrap admin template">
        <meta name="author" content="">
        <script type="text/javascript" src="../_resource/js/header.js"></script>
        <script>
            var RUN_FUNCS = [];
            var SITE_URL = "http://admin.html.me";
            var CURR_CONTROLLER = "Roles";
            var CURR_ACTION = "add";
            Breakpoints();
        </script>
        <style type="text/css">
            .list-table table td, .list-table table th{background:#fff; text-align:center;}
            .__access{display: none;}
        </style>
    </head>
    <body class="dashboard">
        <!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <nav class="site-navbar navbar navbar-default navbar-fixed-top navbar-mega" role="navigation" id="navbardefaultmodel">
             <script type="text/javascript" src="../_resource/js/include.js" onload="HM.SomeFun('head_html')"></script>
        </nav>
        <div class="site-menubar">
            <div class="site-menubar-body" id="site-menubar-body">
                <script type="text/javascript" src="../_resource/js/include.js" onload="HM.SomeFun('nav_html')"></script>
            </div>
        </div>

        <!-- Page -->
        <div class="page">
            <div class="page-content container-fluid">
                <style>
                    #rbac-node-tree-panel{float: left;width: 100%;height: auto;background-color: white;}
                    #rbac-node-tree-panel ul{float: left;padding-left: 0;width: 100%;}
                    .rbac-node-tree{float: left;width: 100%;height: auto;}
                    .rbac-node-tree li{list-style: none;float: left;width: 100%;margin-left: 0px;}
                    .rbac-node-tree li i{float: left;width: 16px;height: 30px;line-height: 30px;}
                    .rbac-node-tree li input{float: left;width: 16px;height: 16px;margin-top: 7px;}
                    .rbac-node-tree li .node-indent{float: left;width: auto;height: 30px;line-height: 30px;margin-left: 10px;margin-right: 10px;}
                    .rbac-node-tree li .node-name{float: left;width: 300px;height: 30px;line-height: 30px;margin-left: 8px;}
                    .__hide{display: none;}
                </style>

                <div class="panel form-box" style="background:#f1f4f5">
                    <div class="panel-body">
                        <form class="validate-form ajax-form" id="bossjobForm">
                            <!-- <div id="name-form-item" class="form-group" style="">
                                <label for="name" class="control-label ">Name<span class="required">*</span>:</label>
                                <div>
                                    <input type="text" name="name" id="rbac-role-name" class="form-control " style="" placeholder=""  value="" />
                                </div>
                            </div> -->
                            <div id="rbac-node-tree-panel">
                                <!-- <ul class="rbac-node-tree">
                                    <li>
                                        <span class="node-indent"></span>
                                        <i class="fa fa-caret-right"></i>
                                        <input type="checkbox" name="">
                                        <span class="node-name">JWT</span>
                                        <ul>
                                            <li>
                                                <span class="node-indent">| - - - |— </span>
                                                <i class="fa fa-caret-right"></i>
                                                <input type="checkbox" name="">
                                                <span class="node-name">JWT</span>
                                                <ul>
                                                    <li>
                                                        <span class="node-indent">| - - - | - - - └— </span>
                                                        <i class="fa fa-caret-right"></i>
                                                        <input type="checkbox" name="">
                                                        <span class="node-name">JWT</span>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul> -->
                            </div>
                            <div class="form-group" style="float: left;">
                                <button type="button" id="create-rbac-role" class="btn btn-lg btn-success">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
                <script type="text/javascript">
                    $(function () {
                        Api.Get('getNodeList', {}, function (object, error) {
                            if (!error && object['message'] && object['status_code'] && object['message'] == 'OK' && object['status_code'] == 200) {
                                var html = getNodesHtml(object['data'], 1, '');
                                $('#rbac-node-tree-panel').html(html);
                                bindNodeTreeEventListener();
                                Api.Get('getRoleAccess', {id: Api.Params()['id']}, function (object, error) {
                                    if (!error && object['message'] && object['status_code'] && object['message'] == 'OK' && object['status_code'] == 200) {
                                        for (var i = 0; i < object['data'].length; ++i) {
                                            var access = object['data'][i];
                                            if (access['_access'] == 1) {
                                                $('.node-checkbox[data-id="' + access['id'] + '"]').data('checked', 1);
                                                $('.node-checkbox[data-id="' + access['id'] + '"]').prop('checked', true);
                                            }
                                        }
                                    }
                                });
                            } else {
                                $.showError('Something Error, Retry Please.', 300, function () {
                                    // window.location.reload();
                                });
                                return true;
                            }
                        });
                        function getNodesHtml(nodes, depth, path, isLeaf = false){
                            switch (depth) {
                                case 1:
                                    var nameIndent = '';
                                    break;
                                case 2:
                                    var nameIndent = '&nbsp;&nbsp;&nbsp;| - - - |- ';
                                    break;
                                case 3:
                                    var nameIndent = '&nbsp;&nbsp;&nbsp;| - - - | - - - - - └— ';
                                    break;
                            }
                            var ulHtml = '<ul class="rbac-node-tree">';

                            for (var i = 0; i < nodes.length; ++i) {
                                var node = nodes[i];
                                if (!(node['_sub'] && node['_sub'].length > 0)) {
                                    isLeaf = true;
                                }
                                if ('' == path) {
                                    var nodePath = node['id'] + '';
                                } else {
                                    var nodePath = path + '-' + node['id'] + '';
                                }
                                var liHtml = '<li>';
                                liHtml = liHtml + Api.render(
                                        '<span class="node-indent">{nameIndent}</span>' +
                                        '<i class="fa fa-caret-right {iHide}" data-path="{path}"></i>' +
                                        '<input type="checkbox" class="node-checkbox" name="" data-id="{id}" data-top-id="{topId}" data-path="{path}">' +
                                        '<span class="node-name">{nodeName}</span>',
                                        {
                                            'id': node['id'],
                                            'nameIndent': nameIndent,
                                            'nodeName': node['node_name'],
                                            'iHide': isLeaf ? '__hide' : '',
                                            'path': nodePath,
                                            'topId': nodePath.split('-')[0],
                                        }
                                );
                                if (node['_sub'] && node['_sub'].length > 0) {
                                    var subUlHtml = getNodesHtml(node['_sub'], depth + 1, nodePath, isLeaf);
                                    liHtml = liHtml + subUlHtml;
                                }
                                liHtml = liHtml + '</li>';
                                ulHtml = ulHtml + liHtml;
                            }
                            ulHtml = ulHtml + '</ul>';
                            return ulHtml;
                        }
                        function bindNodeTreeEventListener() {
                            $('.node-checkbox').click(function (e) {
                                var path = $(this).data('path') + '';
                                path = path.split('-');
                                // check level-1 node
                                if (path.length == 1) {
                                    if ($(this).data('checked') == 1) {
                                        $(this).data('checked', 0);
                                        $('.node-checkbox[data-top-id="' + path[0] + '"]').prop('checked', false);
                                        $('.node-checkbox[data-top-id="' + path[0] + '"]').data('checked', 0);
                                    } else {
                                        $(this).data('checked', 1);
                                        $('.node-checkbox[data-top-id="' + path[0] + '"]').prop('checked', true);
                                        $('.node-checkbox[data-top-id="' + path[0] + '"]').data('checked', 1);
                                    }
                                    // check level-2 node
                                } else if (path.length == 2) {
                                    if ($(this).data('checked') == 1) {
                                        $(this).data('checked', 0);
                                        $('.node-checkbox[data-top-id="' + path[0] + '"]').each(function (i, obj) {
                                            var _path = $(obj).data('path') + '';
                                            _path = _path.split('-');
                                            if (_path.length == 3 && _path[0] == path[0] && _path[1] == path[1]) {
                                                $(obj).data('checked', 0);
                                                $(obj).prop('checked', false);
                                            }
                                        });
                                    } else {
                                        $(this).data('checked', 1);
                                        $('.node-checkbox[data-id="' + path[0] + '"]').data('checked', 1);
                                        $('.node-checkbox[data-id="' + path[0] + '"]').prop('checked', true);
                                        $('.node-checkbox[data-top-id="' + path[0] + '"]').each(function (i, obj) {
                                            var _path = $(obj).data('path') + '';
                                            _path = _path.split('-');
                                            if (_path.length == 3 && _path[0] == path[0] && _path[1] == path[1]) {
                                                $(obj).data('checked', 1);
                                                $(obj).prop('checked', true);
                                            }
                                        });
                                    }
                                    // check level-3 node
                                } else {
                                    if ($(this).data('checked') == 1) {
                                        $(this).data('checked', 0);
                                        $(this).prop('checked', false);
                                    } else {
                                        for (var i = 0; i < path.length; ++i) {
                                            if ($('.node-checkbox[data-id="' + path[i] + '"]').data('checked') != 1) {
                                                $('.node-checkbox[data-id="' + path[i] + '"]').data('checked', 1);
                                                $('.node-checkbox[data-id="' + path[i] + '"]').prop('checked', true);
                                            }
                                        }
                                    }
                                }
                                // uncheck node if all child unchecked
                                var topId = $(this).data('top-id');
                                var uncheckedTop = true;
                                $('.node-checkbox[data-top-id="' + topId + '"]').each(function (i, level2Obj) {
                                    var _path = $(level2Obj).data('path') + '';
                                    _path = _path.split('-');
                                    if (_path.length == 2) {
                                        var uncheckThis = true;
                                        $('.node-checkbox[data-top-id="' + topId + '"]').each(function (j, level3Obj) {
                                            var __path = $(level3Obj).data('path') + '';
                                            __path = __path.split('-');
                                            if (__path.length == 3) {
                                                if (__path[0] == _path[0] && __path[1] == _path[1]) {
                                                    uncheckThis = uncheckThis && ($(level3Obj).data('checked') != 1);
                                                }
                                            }
                                        });
                                        if (uncheckThis) {
                                            $(level2Obj).data('checked', 0);
                                            $(level2Obj).prop('checked', false);
                                        }
                                        uncheckedTop = uncheckedTop && ($(level2Obj).data('checked') != 1);
                                    }
                                });
                                if (uncheckedTop) {
                                    $('.node-checkbox[data-id="' + topId + '"]').data('checked', 0);
                                    $('.node-checkbox[data-id="' + topId + '"]').prop('checked', false);
                                }
                            });
                        }

                        $('#create-rbac-role').click(function () {
                            var nodeIds = [];
                            $('.node-checkbox').each(function (i, obj) {
                                if ($(obj).data('checked') == 1) {
                                    nodeIds.push($(obj).data('id'));
                                }
                            });
                            Api.Put('setRoleAccess', {id: Api.Params()['id'], access_node: JSON.stringify(nodeIds)}, function (object, error) {
                                if (!error && object['message'] && object['status_code'] && object['message'] == 'OK' && object['status_code'] == 200) {
                                    $.showSuccess('Set Role Access Successfully.', 300, function () {
                                        window.location.reload();
                                    });
                                } else {
                                    $.showError('Something Error, Retry Please.', 300, function () {
                                        // window.location.reload();
                                    });
                                    return true;
                                }
                            });
                        });
                    });
                </script>
            </div>

            <!-- Modal -->
            <div class="modal fade" id="confirmModal" aria-hidden="true" role="dialog" tabindex="-1">
                <div class="modal-dialog modal-center">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title"></h4>
                        </div>
                        <div class="modal-body">
                            <p></p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary"></button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="alertModal" aria-hidden="true" role="dialog" tabindex="-1">
                <div class="modal-dialog modal-center">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                            <h4 class="modal-title"></h4>
                        </div>
                        <div class="modal-body">
                            <p></p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Modal -->
        </div>
        <!-- End Page -->

        <!-- Footer -->
        <script type="text/javascript" src="../_resource/js/footer.js"></script>

        <script type="text/javascript">
                    //        $(document).off("click", ".selectable-item");
                    //        $(document).on("click", ".selectable-item", function(){
                    //            var pid = $(this).attr("data-key-pid");
                    //            var ischecked =  $(this).is(':checked');
                    //            if(!ischecked){
                    //                $(this).removeAttr('checked');
                    //                $(".fieldset-pid-"+pid).find("input[type='checkbox']").removeAttr("checked");
                    //            }else{
                    //                $(this).attr('checked');
                    //                $(".fieldset-pid-"+pid).find("input[type='checkbox']").attr("checked","checked");
                    //            }
                    //            return false;
                    //        })
        </script>
        <script>
            (function (document, window, $) {
                'use strict';

                var Site = window.Site;
                $(document).ready(function () {
                    Site.run();
                    $('textarea[maxlength]').maxlength({
                        threshold: 1000,
                        placement: 'bottom-left-inside'
                    });

                    $.components.register("datepicker", {mode: "default", defaults: {autoclose: !0}});

                    if (RUN_FUNCS.length > 0) {
                        for (var i = 0; i < RUN_FUNCS.length; i++) {
                            RUN_FUNCS[i].call();
                        }
                    }
                });
            })(document, window, jQuery);


        </script>
    </body>
</html>